<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery瀑布流实例最流行瀑布流图片展示</title>
<meta name="description" content="jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。" />
<link href="${ctx}/resources/css/index.css" rel="stylesheet" type="text/css" />
<%@include file="/WEB-INF/common/common-header.jsp" %>
<script type="text/javascript" src="${ctx }/resources/js/jquery.masonry.js"></script>
<script type="text/javascript" src="${ctx }/resources/js/jquery.infinitescroll.js"></script>
<script type="text/javascript">
var isWidescreen=screen.width>=1280; 
if(isWidescreen){document.write("<style type='text/css'>.demo{width:1194px;}</style>");}
function item_masonry(){ 
	$('.item img').load(function(){ 
		$('.infinite_scroll').masonry({ 
			itemSelector: '.masonry_brick',
			columnWidth:226,
			gutterWidth:15								
		});		
	});
		
	$('.infinite_scroll').masonry({ 
		itemSelector: '.masonry_brick',
		columnWidth:226,
		gutterWidth:15								
	});	
}
$(function(){

	function item_callback(){ 
		
		$('.item').mouseover(function(){
			$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
			$('.btns',this).show();
		}).mouseout(function(){
			$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
			$('.btns',this).hide();		 	
		});
		
		item_masonry();	

	}

	item_callback();  

	$('.item').fadeIn();

	var sp = 1
	
	$(".infinite_scroll").infinitescroll({
		navSelector  	: "#more",
		nextSelector 	: "#more a",
		itemSelector 	: ".item",
		
		loading:{
			img: "images/masonry_loading_1.gif",
			msgText: ' ',
			finishedMsg: '木有了',
			finished: function(){
				sp++;
				if(sp>=10){ //到第10页结束事件
					$("#more").remove();
					$("#infscr-loading").hide();
					$("#page").show();
					$(window).unbind('.infscr');
				}
			}	
		},errorCallback:function(){ 
			$("#page").show();
		}
		
	},function(newElements){
		var $newElems = $(newElements);
		$('.infinite_scroll').masonry('appended', $newElems, false);
		$newElems.fadeIn();
		item_callback();
		return;
	});

});
</script>
</head>
<body>
<%@include file="/WEB-INF/header.jsp" %>
<div class="demo clearfix">		
	<div class="item_list infinite_scroll">	
		<div class="item masonry_brick">
			<span class="du-recommendation-title">版主力荐</span> 
			<div class="notes-categories"> 
				<ul> 
					<li><a id="latest-notes" class="notes-active" href="###">最新</a></li> 
					<li><a id="praise-notes" class="" href="###">优质精华</a></li>
				 	<li><a id="guide-notes" class="" href="###">实用</a></li> 
				</ul> 
			</div>
			<div class="hot-destinations"> 
				<span class="hot-destinations-title">热门目的地</span>
				<div class="notes-cms clearfix">
				<ul class="notes-cms-group clearfix nslog-area" id="J_notes-cms-china">
					<li><a class="scene-choose" href="###">厦门</a></li>
					<li><a class="scene-choose"  href="###">三亚</a></li>
					<li><a class="scene-choose"  href="###">北京</a></li>
					<li><a class="scene-choose" href="###">港澳</a></li>
					<li><a class="scene-choose"  href="###">丽江</a></li>
					<li><a class="scene-choose" href="###">凤凰</a></li>
					<li><a class="scene-choose"  href="###">青岛</a></li>
				</ul> 
			</div> </div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="${ctx}/resources/images/cj/2012-03-14/420.html"><img width="210" height="164" alt="js图片特效制作js焦点图

上下滚动slider切换效果" src="${ctx}/resources/images/pic/02.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="${ctx}/resources/images/cj/2012-03-14/420.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>js图片特效制作js焦点图上下滚动slider切换效果</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="${ctx}/resources/menu/sx/2012-03-25/502.html"><img width="210" height="287" alt="js树形导航菜单制作垂直js

导航条特效" src="${ctx}/resources/images/pic/03.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="${ctx}/resources/menu/sx/2012-03-25/502.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>js树形导航菜单制作垂直js导航条特效</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/images/2012-09-06/753.html"><img width="210" height="285" alt="flash图片导航条自动切

换轮播焦点图" src="${ctx}/resources/images/pic/04.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/images/2012-09-06/753.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash图片导航条自动切换轮播焦点图</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/images/2012-06-04/640.html"><img width="210" height="323" alt="flash图片特效左右按钮

控制图片折叠切换效果" src="${ctx}/resources/images/pic/05.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/images/2012-06-04/640.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash图片特效左右按钮控制图片折叠切换效果</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/images/2012-05-08/596.html"><img width="210" height="315" alt="flash焦点图片带内容与

按钮的3D动画图片特效" src="${ctx}/resources/images/pic/06.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/images/2012-05-08/596.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash焦点图片带内容与按钮的3D动画图片特效</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/images/2012-03-11/388.html"><img width="210" height="282" alt="flash特效制作flash图片

滚动带按钮控制左右图片滚动" src="${ctx}/resources/images/pic/07.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/images/2012-03-11/388.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash特效制作flash图片滚动带按钮控制左右图片滚动</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/images/2012-03-03/378.html"><img width="210" height="266" alt="flash焦点图切换特效制

作各大网站的焦点图片轮播" src="${ctx}/resources/images/pic/08.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/images/2012-03-03/378.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash焦点图切换特效制作各大网站的焦点图片轮播</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/images/2012-03-03/374.html"><img width="210" height="254" alt="flash焦点图切换动画图

片和标题文字配合显示含flash源码下载" src="${ctx}/resources/images/pic/09.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/images/2012-03-03/374.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash焦点图切换动画图片和标题文字配合显示含flash源码下载</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/images/2012-03-03/370.html"><img width="210" height="276" alt="flash图片切换左右滚动

带序列索引按钮控制flash动画图片特效" src="${ctx}/resources/images/pic/10.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/images/2012-03-03/370.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash图片切换左右滚动带序列索引按钮控制flash动画图片特效</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/flash/letter/2012-03-04/386.html"><img width="210" height="131" alt="flash文字特效制作数字

类似文字打印效果,属于flash动画文字特效一种" src="${ctx}/resources/images/pic/11.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/flash/letter/2012-03-04/386.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash文字特效制作数字类似文字打印效果,属于flash动画文字特效一种</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/css3/layout/2011-10-13/215.html"><img width="210" height="131" alt="div+css制作在IE6 上用

absolute模拟fixed IE6浏览器定位层框不闪动" src="${ctx}/resources/images/pic/12.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/css3/layout/2011-10-13/215.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/css3/layout/2011-02-21/36.html"><img width="210" height="287" alt="CSS如何定位工程" 

src="${ctx}/resources/images/pic/13.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/css3/layout/2011-02-21/36.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>CSS如何定位工程</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/css3/menu/2011-09-21/197.html"><img width="210" height="323" alt="用div+css3美化制作动画导

航特效鼠标滑过动画显示" src="${ctx}/resources/images/pic/14.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/css3/menu/2011-09-21/197.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>用div+css3美化制作动画导航特效鼠标滑过动画显示</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/css3/menu/2011-02-20/22.html"><img width="210" height="304" alt="用div+css制作一个CSS3的简

约图标导航菜单" src="${ctx}/resources/images/pic/15.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/css3/menu/2011-02-20/22.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>用div+css制作一个CSS3的简约图标导航菜单</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/html5/tx/2011-08-13/120.html"><img width="210" height="315" alt="jquery 图片特效用CSS3和

HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="${ctx}/resources/images/pic/16.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/html5/tx/2011-08-13/120.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="#/html5/tx/2011-02-21/42.html"><img width="210" height="314" alt="jquery 幻灯片切换应用一个

HTML5的幻灯片" src="${ctx}/resources/images/pic/17.jpg" /></a>
					<span class="price">￥195.00</span>
					<div class="btns">
						<a href="#/html5/tx/2011-02-21/42.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>jquery 幻灯片切换应用一个HTML5的幻灯片</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
	
	</div>
					
					
	<div id="more"><a href="page/2.html"></a></div>
					
	<div id="page" class="page" style="display:none;">
		<div class="page_num">
			<span class="unprev"></span>
			<span class="current">1</span>
			<a href="#">&nbsp;2&nbsp;</a>
			<a href="#">&nbsp;3&nbsp;</a>
			<a href="#">&nbsp;4&nbsp;</a>
			<a href="#">&nbsp;5&nbsp;</a>
			<span class="etc"></span>
			<a href="#">12</a>
			<a href="#" class="next"></a>
		</div>
	</div>

</div>
<div class="sheet-overlay" style="opacity: 1;"></div>
<div id="sheet" class="destroy" style="display: block; top: 39px;">
	<div id="sheet_login" class="sheet">
		<div class="head"><h2>登录share</h2></div>
		<div class="body">
			<div class="login-connect">
				<h5>使用合作网站帐号登录</h5>
				<div class="connections clearfix">
					<a href="/oauth/weibo/instant_login/" onclick="" class="weibo login-button">新浪微博</a>
					<a href="/oauth/douban/instant_login/" onclick="" class="douban login-button">豆瓣</a>
					<a href="/oauth/renren/instant_login/" onclick="" class="renren login-button">人人网</a>
					<a href="/oauth/qzone/instant_login/" onclick="" class="qzone login-button">QQ</a>
				</div>
				<p class="less">未注册过share也可以直接登录哦</p>
			</div>
			<div class="login-form">
				<h5>使用注册邮箱登录</h5>
				<form id="auth_form" action="https://huaban.com/auth/" method="post" class="Form FancyForm AuthForm">
					<ul>
						<li>
							<div class="input email">
									<input id="login_email" name="email" type="text" value=""/>
									<label>注册邮箱</label>
									<span class="fff"></span>
							</div>
						</li>
						<li>
							<div class="input password">
								<input id="login_password" name="password" type="password"/>
								<label>密码</label>
								<span class="fff"></span>
								</div></li></ul>
					<div class="non_inputs">
						<a id="login_btn" href="#" onclick="" class="btn btn18 rbtn"><strong> 登录</strong><span></span></a>
						<a id="reset_password" href="#" onclick="" class="less fr">忘记了密码？</a>
						<a id="back_to_login" href="#" style="display: none;" onclick="" class="less fr">哦，又想起来了!</a>
					</div>
				</form>
				<div id="reset_msg" style="display: none;" class="success"></div>
			</div>
			<div class="clear" style="clear:both;"></div>
		</div>
		<a href="#" title="关闭" onclick="" class="close"></a>
	</div>
</div>	
<div style="display:none;" id="gotopbtn" class="to_top"><a title="返回顶部" href="javascript:void(0);"></a></div>
					
<script type="text/javascript">
$(function(){

	$(window).scroll(function(){
		$(window).scrollTop()>1000 ? $("#gotopbtn").css('display','').click(function(){
			$(window).scrollTop(0);
		}):$("#gotopbtn").css('display','none');	
	});
	
});
</script>

</body>
</html>
